<template>
  <ScrollWrapper>
    <div class="container">
      <div class="container-content">
        <!-- 页面头部 -->
        <div class="header">
          <h2 class="title">
            <a-space>
              <div class="select-container">
                部门
                <a-select
                    v-model:value="deptValue"
                    label-in-value
                    style="width: 120px"
                    :options="deptOption"
                    @change="onDeptChange"
                ></a-select>
              </div>

              <div class="select-container">
                职位级别
                <a-select
                    v-model:value="levelValue"
                    label-in-value
                    style="width: 140px"
                    :options="levelOption"
                    @change="onLevelChange"
                ></a-select>
              </div>

              <div class="select-container">
                模板标识
                <a-select
                    v-model:value="tempValue"
                    label-in-value
                    style="width: 80px"
                    :options="tempOption"
                ></a-select>
              </div>

              <div class="select-container">
                模板类型
                <a-select
                    v-model:value="typeValue"
                    label-in-value
                    style="width: 120px"
                    :options="typeOption"
                ></a-select>
              </div>
            </a-space>
          </h2>
          <div class="actions">
            <a-button class="sync-btn" @click="onSearch">查询</a-button>
            <a-button class="add-btn" @click="onAdd">新增</a-button>
            <a-button type="primary" class="save-btn" @click="onSave">保存</a-button>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
          <a-table
              :columns="columns"
              :data-source="dataSource"
              class="department-table pagination-container"
              :loading="loading"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'check'">
                <a-switch v-model:checked="record.check"/>
              </template>
              <template v-else-if="column.key === 'sketch'">
                <div style="display: flex; align-items: center; flex-direction: column">
                  <div style="word-break: keep-all">考核指标</div>
                  <a-input style="border-color: #777;margin-top: 10px; width: 80px"
                           v-model:value="record.sketch"></a-input>
                </div>
              </template>

              <template v-else-if="column.key === 'memo'">
                <a-textarea v-model="record.memo" :rows="4" placeholder="输入文本"></a-textarea>
              </template>

              <template v-else-if="column.key === 'unit'">
                <a-input-number v-model:value="record.unit"/>
              </template>

              <template v-else-if="column.key === 'max'">
                <a-input-number v-model:value="record.max"/>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </ScrollWrapper>
</template>

<script>
import ScrollWrapper from "@/components/ScrollWrapper/ScrollWrapper.vue";
import {message} from 'ant-design-vue';
import help from "@/utils/help.js";
import api from "@/api/index.js";

export default {
  components: {
    ScrollWrapper,
  },
  name: "PayTemp",
  data() {
    return {
      loading: false,
      departments: [],
      deptValue: "",
      typeValue: "",
      tempValue: "",
      levelValue: "",
      columns: [
        {
          title: '隶属部门',
          dataIndex: 'departmentName',
          key: 'departmentName',
          align: 'center',
        },
        {
          title: '职位级别',
          dataIndex: 'positionLevel',
          key: 'positionLevel',
          align: 'center'
        },
        {
          title: '模板表示',
          dataIndex: 'characteristic',
          key: 'characteristic',
          align: 'center'
        },
        {
          title: '简述',
          dataIndex: 'sketch',
          key: 'sketch',
          align: 'center'
        },
        {
          title: '说明',
          dataIndex: 'description',
          key: 'description',
          align: 'center'
        },
        {
          title: '单位金额',
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'center'
        },
        {
          title: '最大获得数量',
          dataIndex: 'amount',
          key: 'amount',
          align: 'center'
        },
        {
          title: '最后更新人',
          dataIndex: 'updater',
          key: 'updater',
          align: 'center'
        },
        {
          title: '最后更新时间',
          dataIndex: 'time',
          key: 'time',
          align: 'center'
        },
        {
          title: '是否启用',
          dataIndex: 'check',
          key: 'check',
          align: 'center'
        },
      ],
      dataSource: []
    }
  },
  async mounted() {
    await this.getCascade();
    await this.getList();
  },

  computed: {
    deptOption() {
      const options = this.departments.map(d => ({
        label: d.departmentName,
        value: d.departmentId
      }))
      return [{label: "全部", value: ""}, ...options]
    },
    levelOption() {
      console.log("11", this.deptValue);
      if (!this.deptValue || !this.deptValue?.key) return [{label: "全部", value: ""}]
      const dept = this.departments.find(d => d.departmentId === this.deptValue.value)
      const options = dept.positionLevels.map(l => ({
        label: l.positionLevel,
        value: l.positionLevel
      }))
      console.log("option", this.deptValue, options)
      return [{label: "全部", value: ""}, ...options]
    },
    tempOption() {
      if (!this.levelValue || !this.levelValue?.key) return [{label: "全部", value: ""}]
      const dept = this.departments.find(d => d.departmentId === this.deptValue.value)
      const level = dept.positionLevels.find(l => l.positionLevel === this.levelValue.value)
      const options = level.characteristics.map(c => ({
        label: c.characteristic,
        value: c.characteristic
      }))
      return [{label: "全部", value: ""}, ...options]
    },
    typeOption() {
      const options = []
      return [{label: "全部", value: ""}, ...options]
    }
  },

  methods: {
    onDeptChange() {
      this.levelValue = ""
      this.tempValue = ""
    },
    onLevelChange() {
      this.tempValue = ""
    },
    async getCascade() {
      try {
        let result = await api.getCascade({
          "departmentId": null,
          "positionLevel": null,
          "characteristic": null
        });
        this.departments = result;
      } catch (error) {
        help.showError(error);
      }
    },

    async getList() {
      try {
        this.loading = true;
        let result = await api.getSaleryModelDetails({
          "departmentId": this.deptValue?.key,
          "positionLevel": this.levelValue?.key,
          "characteristic": this.tempValue?.key
        });
        this.dataSource = result;
        console.log("result", result);
      } catch (e) {
        help.showError(e);
      } finally {
        this.loading = false;
      }
    },

    onSearch() {
      this.getList();
    },
    onAdd() {
      message.info('添加');
    },
    onSave() {

    },
    handleViewDetail(record) {
      message.info(`查看 ${record.departmentName} 详情`);
    },
    handleToggleStatus(record) {
      const newStatus = record.status === '正常' ? '作废' : '正常';
      record.status = newStatus;
      message.success(`${record.departmentName} 已${newStatus}`);
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 20px 24px 0;
  box-sizing: border-box;
}

.container-content {
  background-color: #fff;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  border-radius: 30px;
  flex: 1;
  padding: 24px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .actions {
    display: flex;
    gap: 12px;
    margin: 0 30px;

    .sync-btn {
      color: #3a7c5a;
      font-weight: 400;
      border-radius: 6px;
      width: 110px;
      border-color: #3a7c5a;

      &:hover {
        opacity: 0.6;
      }
    }

    .add-btn {
      background-color: #b0cb4a;
      border-radius: 6px;
      color: #fff;
      width: 110px;

      &:hover {
        opacity: 0.6;
      }
    }

    .save-btn {
      background-color: #3a7c5a;
      border-radius: 6px;
      width: 110px;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

.table-container {
  flex: 1;
  margin-bottom: 24px;

  :deep(.department-table) {
    .ant-table-thead > tr > th {
      background-color: #fff;
      font-weight: 500;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 8px;
    }

    .ant-table-tbody > tr > td {
      padding: 16px 8px;
      border-bottom: 1px solid #f0f0f0;
      color: #333;
    }

    .ant-table-tbody > tr:hover > td {
      background-color: #f5f5f5;
    }

    .ant-table-cell:before {
      width: 0 !important;
    }

    .ant-table-thead > tr > .ant-table-cell {
      color: #d9d9d9;
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;

    .detail-btn {
      background-color: #fff;
      border: 1px solid #3a7c5a;
      color: #3a7c5a;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .enable-btn {
      background-color: #3a7c5a;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .disable-btn {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        background-color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
}

.pagination-container {

  :deep(.ant-pagination) {
    .ant-pagination-item {
      border-radius: 4px;

      &.ant-pagination-item-active {
        background-color: #3a7c5a;
        border-color: #3a7c5a;

        a {
          color: #fff;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      border-radius: 4px;

      &:hover {
        border-color: #3a7c5a;
        color: #3a7c5a;
      }
    }
  }
}

:deep(.ant-tag) {
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;

  &.ant-tag-green {
    background-color: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
  }

  &.ant-tag-orange {
    background-color: #fff7e6;
    border-color: #ffd591;
    color: #fa8c16;
  }
}

.select-container {
  background-color: #f7f7f7;
  border-radius: 8px;
  display: flex;
  word-break: keep-all;
  font-size: 14px;
  align-items: center;
  padding: 0 10px;
}

::v-deep(.select-container .ant-select-selector) {
  background-color: transparent;
  border-color: transparent !important;
}

.title {
  padding-left: 24px;
}
</style>